<template>
  <div id="shopListShow">
    <!-- :style="" -->
    <van-popup v-model="showList" position="bottom" :closeable="true" :style="{ height: '30%', background: 'transparent' }" @close="closeTap">
      <div class="shopListBox">
        <div class="title">切换店铺</div>
        <div class="lis">
          <div class="left">
            <div class="img">
              <img :src="supplier.logo" alt="" />
            </div>
            <span>{{ supplier.store_name }}</span>
          </div>
          <div class="right" @click="goUrl('supplier')">进入</div>
        </div>
        <div class="lis">
          <div class="left">
            <div class="img">
              <img :src="logo" alt="" v-if="logo" />
              <img else src="../../../../assets/images/photo-mr.jpg" alt="">
            </div>
            <span>商城首页</span>
          </div>
          <div class="right" @click="goUrl('home')">进入</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    showList: {
      type: Boolean,
      default: false
    },
    supplier: {
      type: [String, Object],
      default: () => ({})
    },
    supplierDataId: {
      type: [String, Number],
      default: 0
    },
  },
  data() {
    return {
      logo:''
    };
  },
  mounted() {
    // ../../../../assets/images/photo-mr.jpg
    this.logo = window.localStorage.getItem("globalParameter").shop_logo;
    console.log(this.logo)
  },
  methods: {
    closeTap() {
      this.$emit("close");
    },
    goUrl(key) {
      this.closeTap();
      if (key == "supplier") {
        let url = "";
        // 区分供应商样式一和二跳转
        if (this.supplier.aggregate) {
          url = "SupplierShop2";
        } else {
          url = "SupplierShop";
        }
        this.$router.push(
          this.fun.getUrl(url, {
            id: this.supplierDataId,
            fromHome: 1
          })
        );
      } else {
        this.$router.push(this.fun.getUrl("home", {}));
      }

    }
  }
};
</script>
<style lang="scss" scoped>
.shopListBox {
  height: 100%;
  background: #fff;
  border-radius: 1rem 1rem 0 0;

  .title {
    line-height: 3rem;
    font-size: 1rem;
  }

  .lis {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    justify-content: space-between;
  }

  .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;

    .img {
      margin-right: 0.5rem;

      img {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
      }
    }
  }

  .right {
    flex-shrink: 0;
    width: 4.6875rem;
    height: 1.5625rem;
    line-height: 1.5625rem;
    background-color: #f14e4e;
    border-radius: 0.8125rem;
    color: #fff;
    font-size: 0.75rem;
  }
}
</style>